.cm-badge-ribbon {
    position: relative;
}

.cm-badge-ribbon-inner {
    position: absolute;
    padding: 0 8px;
    font-size: 14px;
    line-height: 22px;
    top: 8px;
    white-space: nowrap;
    color: var(--cui-ribbon-background-color, var(--cui-color-primary));
    background-color: var(--cui-ribbon-background-color, var(--cui-color-primary));
    border-radius: var(--cui-border-radius-small);
}

.cm-badge-ribbon-text {
    color: #fff;
}

.cm-badge-ribbon-corner {
    position: absolute;
    top: 100%;
    width: 8px;
    height: 8px;
    color: currentcolor;
    border: 4px solid;
    transform: scaleY(0.75);
    transform-origin: top;
    filter: brightness(75%);
}

.cm-badge-ribbon-end {
    .cm-badge-ribbon-inner {
        inset-inline-end: -8px;
        border-end-end-radius: 0;
    }

    .cm-badge-ribbon-corner {
        inset-inline-end: 0;
        border-inline-end-color: transparent;
        border-block-end-color: transparent;
    }
}

.cm-badge-ribbon-start {
    .cm-badge-ribbon-inner {
        inset-inline-start: -8px;
        border-end-start-radius: 0;
    }

    .cm-badge-ribbon-corner {
        inset-inline-start: 0;
        border-inline-start-color: transparent;
        border-block-end-color: transparent;
    }
}

@ribbonthemes: blue, green, red, yellow, magenta, pink, volcano, orange, gold, lime, cyan, geekblue, purple;

each(@ribbonthemes, {
        .cm-badge-ribbon-@{value} {
            .cm-badge-ribbon-inner {
                --cui-ribbon-background-color: var(~"--cui-theme-color-@{value}");
            }
        }
    }

);

.cm-badge-ribbon-status-success .cm-badge-ribbon-inner{
    --cui-ribbon-background-color: rgb(var(--cui-green-5));
    --cui-ribbon-trangle-background-color: rgb(var(--cui-green-5));
}
.cm-badge-ribbon-status-error .cm-badge-ribbon-inner {
    --cui-ribbon-background-color: rgb(var(--cui-red-5));
    --cui-ribbon-trangle-background-color: rgb(var(--cui-red-5));
}
.cm-badge-ribbon-status-warning .cm-badge-ribbon-inner {
    --cui-ribbon-background-color: rgb(var(--cui-yellow-5));
    --cui-ribbon-trangle-background-color: rgb(var(--cui-yellow-5));
}
.cm-badge-ribbon-status-processing .cm-badge-ribbon-inner{
    --cui-ribbon-background-color: var(--cui-color-primary);
    --cui-ribbon-trangle-background-color: var(--cui-color-primary);
}
.cm-badge-ribbon-status-info .cm-badge-ribbon-inner {
    --cui-ribbon-background-color: rgb(var(--cui-blue-4));
    --cui-ribbon-trangle-background-color: rgb(var(--cui-blue-4));
}
.cm-badge-ribbon-status-disabled .cm-badge-ribbon-inner {
    --cui-ribbon-background-color: rgb(var(--cui-grey-2));
    --cui-ribbon-trangle-background-color: rgb(var(--cui-grey-2));
}


.cm-badge-ribbon-trangle {
    .cm-badge-ribbon-inner {
        width: var(--cui-ribbon-trangle-size, 100px);
        height: var(--cui-ribbon-trangle-size, 100px);
        overflow: hidden;
        top: 0;
        background: transparent;
        padding: 0;
        inset-inline-end: 0px!important;

        .cm-badge-ribbon-text {
            position: absolute;
            top: calc(50% - (var(--cui-ribbon-trangle-height, 28px) + 6px) / 2.828);
            right: calc(50% - (var(--cui-ribbon-trangle-height, 28px) + 6px) / 2.828);
            z-index: 2;
            width: 150%;
            height: var(--cui-ribbon-trangle-height, 28px);
            overflow: hidden;
            transform: rotate(45deg) translate(50%, -50%);
            transform-origin: right top;
            border: 1px dashed;
            box-shadow: 0 0 0 3px var(--cui-ribbon-trangle-background-color, var(--cui-color-primary)), 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
            background: var(--cui-ribbon-trangle-background-color, var(--cui-color-primary));
        
            /* 文本居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    &.cm-badge-ribbon-start {
        .cm-badge-ribbon-inner {
            inset-inline-start: 0px!important;
            .cm-badge-ribbon-text {
                transform: rotate(-45deg) translate(-50%, -50%);
                right: auto;
                transform-origin: left top;
                left: calc(50% - (var(--cui-ribbon-trangle-height, 28px) + 6px) / 2.828);
            }
        }
    }
}

each(@themes, {
        .cm-badge-ribbon-trangle.cm-badge-ribbon-@{value} {
            --cui-ribbon-trangle-background-color: var(~"--cui-theme-color-@{value}");
        }
    }
);